<template>
	<view class="tabbar-container">
		<template v-for="(item, index) in tabbarList">
			<view class="tabbar-item" v-if="item.visible" :class="[item.centerItem ? ' center-item' : '']"
		            @click="changeItem(item)">
					<view class="item-top">
					    <image class="tabImage" :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
					</view>
		            <view class="item-bottom"  :class="[currentItem == item.id ? 'item-active' : '']">
		                <text class="tabFont">{{ item.text }}</text>
		            </view>
		        </view>
		</template>
		        
	</view>
</template>

<script setup>
    import {
        defineProps,
        onMounted,
        ref,
		defineExpose
    } from "vue"
    const props = defineProps({
        currentPage: {
            type: Number,
            default: 0
        }
    })
    const currentItem = ref(0);
    const tabbarList = ref([{
            id: 0,
            path: '/pages/activities/index',
            icon: '/static/活动2.png',
            selectIcon: '/static/活动广场.png',
            text: '活动广场',
            centerItem: false,
			visible: true,
        },
        {
            id: 1,
            path: '/pages/enquiry/enquiry',
            icon: '/static/招宣广场.png',
            selectIcon: '/static/招宣广场2.png',
            text: '招宣广场',
            centerItem: false,
			visible: true,
        },
        {
            id: 2,
            path: '/pages/moreAbility/index',
	        icon: '/static/更多.png',
	        selectIcon: '/static/更多功能-2.png',
            text: '更多功能',
            centerItem: false,
			visible: true,
        }
    ]);

    function changeItem(item) {
        uni.switchTab({
            url: item.path
        });
    }

    onMounted(() => {
        currentItem.value = props.currentPage;
        // 非微信小程序需隐藏原生tabBar（微信小程序已通过"custom": true配置项隐藏原生tabbar）
    });
	
	
	
	function controlMiddleTab(flag){
		tabbarList.value.at(1).visible  = flag;
	}
	
	defineExpose(['controlMiddleTab']);
</script>

<style scoped>

	.tabImage{
		width: 36rpx;
		height: 36rpx;
	}

	.tabFont{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 20rpx;
	}

    view {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .tabbar-container {
        position: fixed;
        bottom: 0rpx;
        left: 50%;
        transform: translateX(-50%);
       width: 100%;
       height: 166rpx;
       background: #FFFFFF;
       box-shadow: 0 0 4rpx 0 rgba(0, 0, 0, 0.04);
			border-top: 4rpx solid #FFFFFF;
		    border-top-left-radius: 24rpx; /* 设置左上角圆角 */  
		    border-top-right-radius: 24rpx; /* 设置右上角圆角 */  
		    border-right: none;          /* 去掉右边框 */  
		    border-bottom: none;         /* 去掉下边框 */  
		    border-left: none;  
        display: flex;
        justify-content: space-around;
        padding: 5rpx 0;
        color: #5D5C5C;
    }

    .tabbar-container .tabbar-item {
        width: 20%;
        height: 100rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .tabbar-container .item-active {
        color: #000000;
    }

    .tabbar-container .center-item {
        display: block;
        position: relative;
    }

    .tabbar-container .tabbar-item .item-top {
        width: 70rpx;
        height:46rpx;
        padding-top: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
    }

    .tabbar-container .center-item .item-top {
        flex-shrink: 0;
        width: 32rpx;
        height: 32rpx;
        padding: 20rpx;
        position: absolute;
        top: -70rpx;
        /* left: calc(50% - 50rpx); */
        border-radius: 50%;
        /* box-shadow: 0 0 5px #999; */
        background-color: #f3d9a6;
    }

    .tabbar-container .tabbar-item .item-top image {
        width: 32rpx;
        height: 32rpx;
    }

    .tabbar-container .center-item .item-top image {
        width: 50rpx;
        height: 50rpx;
    }

    .tabbar-container .tabbar-item .item-bottom {
        font-size: 28rpx;
        width: 100%;
    }

    .tabbar-container .center-item .item-bottom {
        position: absolute;
        bottom: 0;
    }

</style>
